{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/animate.css/3.7.2/animate.min.css" /}
<style>
  .main-container {
    text-align: center;
  }

  .customization-container {
    max-width: 1200px;
  }

  .space-slider {
    width:500px;display:flex;justify-content: space-between;position: absolute;bottom: 0; right: 0
  }

  .space-slider > span {
    color: #AFB0B1;
    cursor: pointer;
    padding-bottom: 5px;
    font-size: 22px;
    border-bottom: 3px #FFFFFF solid;
  }

  .space-slider > .space-active {
    color: #93412C;
    border-bottom: 3px #93412C solid;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
  }

  .swiper-container .swiper-button-prev::after {
    content: '';
  }
  .swiper-container .swiper-button-next::after {
    content: '';
  }
  .swiper-container .swiper-button-prev{
    background-image: url('https://res.bestyoujia.com/web/ZMYJ/customization/pc/left.png') ;
    left: 41%;
    right: auto;
    width: 30px;
    height: 30px;
    top: 98%;
    background-repeat: no-repeat;
  }
  .swiper-container .swiper-button-next{
    background: url('https://res.bestyoujia.com/web/ZMYJ/customization/pc/right.png');
    right: 54%;
    width: 30px;
    height: 30px;
    left: auto;
    top: 98%;
    background-repeat: no-repeat;
  }
  .swiper-pagination {
    text-align: left;
    color: #FFFFFF;
    margin-left: 20%;
  }


  .swiper-container1 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .swiper-pagination1 {
    position: absolute;
    z-index: 100;
    left: -180px !important;
    top: 93%;
  }

  .swiper-container1 .swiper-pagination1 .swiper-pagination-bullet {
    background: rgba(200,200,200,.6);
    opacity: 1.0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .swiper-container1 .swiper-pagination1 .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }
  .swiper-container1 .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 5px;
  }

  .title {
    margin: 50px 0;
    color: #FFFFFF;
  }

  .title > span:nth-child(1) {
    font-size: 26px;
  }

  .title > span:nth-child(2) {
    font-size: 20px;
    margin-top: 10px;
  }

  .dingzhi-slider {
    display: flex;flex-direction: column;flex: 1;justify-content: space-between
  }

  .dingzhi-slider > div {
    cursor: pointer;
    display: flex;flex-direction: column;text-align: left;color: rgba(155, 155, 155, .4);
  }

  .dingzhi-slider > div > span:nth-child(1) {
    font-weight: bold;
  }

  .dingzhi-slider > .dingzhi-active {
    color: #FFFFFF;
    padding-bottom: 5px;
    border-bottom: 2px #FFFFFF solid
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <div style="position: relative">
    <img alt="" class="img-fluid page-banner" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/banner.png">
    <div style="position: absolute; top: 77%;right: 18%;">
      <button onclick="doConsult()" style="height: 40px;padding: 5px 20px;border: none;background: #D19F83;color: #ffffff;border-radius:4px;">在线咨询 ></button>
      <button onclick="showAppointmentLayer()" style="margin-left: 50px;height: 40px;padding: 5px 20px;border: none;background: #B94047;color: #ffffff;border-radius:4px;">立即报名 ></button>
    </div>
  </div>

  <div class="d-flex flex-column mx-auto customization-container">
    <div class="d-flex flex-column" style="position: relative">
      <img class="img-fluid" style="margin-top: 50px" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/30.png">
      <div class="space-slider">
        <span class="space-active">+ 空间扩容</span>
        <span>+ 功能收纳</span>
        <span>+ 板材配置</span>
      </div>
    </div>
    <div style="margin: 40px">
      <img id="space-img" style="width: 80%" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/space.png">
    </div>
  </div>

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/a.png">
      </div>
      <div class="swiper-slide">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/b.png">
      </div>
      <div class="swiper-slide">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/c.png">
      </div>
      <div class="swiper-slide">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/d.png">
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/materials.png">
  <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/quality.png">

  <img class="img-fluid" style="margin:50px;width: 65%" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/delivery.png">

  <div style="position: relative;text-align: left">
    <img class="img-fluid" style="position: relative;width: 70%" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/title_eg.png">
    <!-- Swiper -->
    <div class="swiper-container1" style="margin-top: -80px">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="img-fluid" style="width: 60%;float: right;margin-right: 110px;" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/eg1.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" style="width: 60%;float: right;margin-right: 110px;" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/eg2.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" style="width: 60%;float: right;margin-right: 110px;" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/eg3.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" style="width: 60%;float: right;margin-right: 110px;" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/eg4.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" style="width: 60%;float: right;margin-right: 110px;" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/eg5.png">
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination1"></div>
    </div>
  </div>

  <div class="d-flex flex-column" style="margin-top:50px;padding-bottom:50px;background-image: url('https://res.bestyoujia.com/web/ZMYJ/customization/pc/dbbg.png');background-size: contain">
    <div class="d-flex flex-column title">
      <span>致美优家全屋定制 VS 第三方定制</span>
      <span>95%精装房业主选择致美优家</span>
    </div>
    <div style="width: 1200px;margin: 0 auto;display: flex;">
      <div class="dingzhi-slider">
        <div class="dingzhi-active">
          <span>花色</span>
          <span>COLOUR</span>
        </div>
        <div>
          <span>融合度</span>
          <span>BLEND</span>
        </div>
        <div>
          <span>设计</span>
          <span>DESIGN</span>
        </div>
        <div>
          <span>安装</span>
          <span>INSTALL</span>
        </div>
        <div>
          <span>服务</span>
          <span>SERVICE</span>
        </div>
      </div>
      <div style="margin-left: 60px">
        <img id="dingzhi-img" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/db1.png">
      </div>
    </div>
  </div>

  <div class="d-flex flex-column">
    <img onclick="showAppointmentService()" class="mx-auto" style="width:100%;cursor: pointer" src="https://res.bestyoujia.com/web/ZMYJ/customization/pc/yy.png">
  </div>

</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    $('.navbar-nav').children('li').eq(2).addClass('nav-active');

    const spaceImg = [
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/space.png',
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/function.png',
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/board.png',
    ];
    $('.space-slider > span').each(function(index,element) {
        $(this).click(function(){
            $('.space-slider > span').removeClass('space-active');
            $(this).addClass('space-active');
            $('#space-img').attr('src', spaceImg[index]);
            $('#space-img').addClass('animated bounceInLeft');
            setTimeout(function(){
                $('#space-img').removeClass('bounceInLeft');
            }, 1000);
        })
    });

    const dingzhiImg = [
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/db1.png',
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/db2.png',
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/db3.png',
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/db4.png',
        'https://res.bestyoujia.com/web/ZMYJ/customization/pc/db5.png',
    ];
    $('.dingzhi-slider > div').each(function(index,element) {
        $(this).click(function(){
            $('.dingzhi-slider > div').removeClass('dingzhi-active');
            $(this).addClass('dingzhi-active');
            $('#dingzhi-img').attr('src', dingzhiImg[index]);
            $('#dingzhi-img').addClass('animated fadeInUp');
            setTimeout(function(){
                $('#dingzhi-img').removeClass('fadeInUp');
            }, 1000);
        })
    });

    const swiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 2500,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    const swiper1 = new Swiper('.swiper-container1', {
        autoplay: {
          delay: 2500,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        pagination: {
            el: '.swiper-pagination1',
            clickable :true,
        },
    });

</script>
{/block}